<template>
	<view>
		<nav-bars :bgColor="scrollData >= 60 ? '#fff' : ''" title="基本信息"></nav-bars>
		<view class="gradient_top"></view>
		<view class="Main">
			<view class="MainTopBg"></view>
			<view class="MainDivider"><u-divider color="#3C3630" bg-color="none" fontSize="28" half-width="100" border-color="#655746">贷款类型：宇鑫金融</u-divider></view>
			<view class="MainFrom">
				<view class="MainFromItem">
					<view class="MainLable">
						姓名
						<text>*</text>
					</view>
					<input type="text" v-model="UserName" placeholder="请输入姓名" placeholder-style="font-weight: 500;color: #909090;font-size: 30rpx;" />
				</view>
				<view class="MainFromItem">
					<view class="MainLable">
						手机号
						<text>*</text>
					</view>
					<input  @input="bindKeyInput" :value="Phone" maxlength="11" placeholder="请输入手机号码" placeholder-style="font-weight: 500;color: #909090;font-size: 30rpx;" />
				</view>
			</view>
			<view class="uploadList">
				<view class="uploadTitle">
					<view class="uploadIcon"></view>
					<view class="uploadNav">身份证正反面</view>
				</view>
				<view class="uploadView">
					<view class="uploadMain">
						<view class="uploadText">请上传第二代居民身份证正/反面</view>
						<view class="personal_upload">
							<view class="personal_View" @click="uploadImg('imagejust')">
								<image :src="imagejust.length > 0 ? imagejust[0].path : defaultOne"></image>
								<view class="LookView" v-if="imagejust.length > 0">
									<view class="LookItem">
										<view class="LookEye" @click.stop="PreviewItemImg(imagejust)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
										<view @click.stop="removeImg('imagejust', 0)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
									</view>
								</view>
							</view>
							<view class="personal_View" @click="uploadImg('imageback')">
								<image :src="imageback.length > 0 ? imageback[0].path : defaultTwo"></image>
								<view class="LookView" v-if="imageback.length > 0">
									<view class="LookItem">
										<view class="LookEye" @click.stop="PreviewItemImg(imageback)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
										<view @click.stop="removeImg('imageback', 0)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="uploadList">
				<view class="uploadTitle">
					<view class="uploadIcon"></view>
					<view class="uploadNav">半年银行流水</view>
				</view>
				<view class="uploadView">
					<view class="uploadMain">
						<view class="uploadText">请拍照上传半年银行流水</view>
						<view class="imgWrap">
							<view class="imgBox" v-for="(item, index) in BankFlow" :key="index">
								<image :src="item.path" mode=""></image>
								<view class="LookView" v-if="BankFlow">
									<view class="LookItem">
										<view class="LookEye" @click.stop="PreviewImage(BankFlow, index)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
										<view @click.stop="removeImg('BankFlow', index)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
									</view>
								</view>
							</view>
							<view class="img" @click="uploadImg('BankFlow')"><image :src="`${baseImg}/static/loan/camera.png`"></image></view>
						</view>
					</view>
				</view>
			</view>
			<view class="uploadList">
				<view class="uploadTitle">
					<view class="uploadIcon"></view>
					<view class="uploadNav">购房合同/房产证</view>
				</view>
				<view class="uploadView" style="border: none;">
					<view class="uploadMain">
						<view class="uploadText">请拍照上传购房合同/房产证</view>
						<view class="imgWrap">
							<view class="imgBox" v-for="(item, index) in EstateLicense" :key="index">
								<image :src="item.path" mode=""></image>
								<view class="LookView" v-if="EstateLicense">
									<view class="LookItem">
										<view class="LookEye" @click.stop="PreviewImage(EstateLicense, index)"><u-icon name="eye" color="#fff" size="50"></u-icon></view>
										<view @click.stop="removeImg('EstateLicense', index)"><u-icon name="trash" color="#fff" size="50"></u-icon></view>
									</view>
								</view>
							</view>
							<view class="img" @click="uploadImg('EstateLicense')"><image :src="`${baseImg}/static/loan/camera.png`"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btnView"><view class="btn" @click="SubmitMessage">提交</view></view>
	</view>
</template>
<script>
import $https from '@/service/loan.js';
import URL from '@/config/url.js';
var Rexphone = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
export default {
	name: '',
	components: {},
	data() {
		return {
			scrollData: 0,
			baseImg: 'https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com',
			defaultOne: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/just.png',
			defaultTwo: 'https://dev-liankun-1305433883.cos.ap-guangzhou.myqcloud.com/liankun/static/verification/back.png',
			justBoole: false,
			backBoole: false,
			imagejust: [], //身份证正面
			imageback: [], //身份证反面
			BankFlow: [], //银行流水
			EstateLicense: [], //房产证
			UserName: '', //姓名
			Phone: '' //手机号
		};
	},
	onLoad(options) {
		this.$utils.getUrl()
	},
	onPageScroll(e) {
		this.scrollData = e.scrollTop;
	},
	methods: {
		// 验证只能输入数字
		validateNumber(val) {
			return val.replace(/\D/g, '');
		},
		// 手机号码的双向数据绑定只能输入数字
		bindKeyInput(e) {
			var that = this;
			let value = that.validateNumber(e.detail.value);
			that.Phone = value;
			return value;
		},
		SubmitMessage() {
			var that = this;
			let imagejust = that.imagejust; //身份证正面
			let imageback = that.imageback; //身份证反面
			let BankFlow = that.BankFlow; //银行流水
			let EstateLicense = that.EstateLicense; //房产证
			let UserName = that.UserName; //姓名
			let Phone = that.Phone; //手机号
			let BankFlowArr = []
			let EstateLicenseArr = []
			this.BankFlow.map(item => {
				BankFlowArr.push(item.id)
			})
			this.EstateLicense.map(item => {
				EstateLicenseArr.push(item.id)
			})
			if (imagejust.length != 0 && imageback.length != 0 && BankFlow.length != 0 && EstateLicense.length != 0 && UserName != '' && Phone != '' && Rexphone.test(Phone)) {
				let params = {
					name:UserName,
					phone:Phone,
					id_no_front:imagejust[0].id,
					id_no_back:imageback[0].id,
					bank_flow:BankFlowArr.join(','),
					estate_license:EstateLicenseArr.join(','),
				};
				console.log(params);
				uni.showLoading({
					title: '正在提交...'
				});
				 $https.YxLoanArchive(params).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						});
						// uni.navigateBack({
						// 	delta: 2
						// })
						// setTimeout(() => {
						// 	uni.redirectTo({
						// 		url: '/pages_Verification/verification/status/status?isPersonal=true&status=0'
						// 	});
						// }, 2100);
						// console.log(that.BankCard);
					} else {
						// uni.redirectTo({
						//   url: '/pages_Verification/verification/status/status?isPersonal=true&status=2'
						// })
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none'
						// });
					}
				});
			}
			if (imagejust.length == 0) {
				uni.showToast({
					title: '请上传身份证正面照！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (imageback.length == 0) {
				uni.showToast({
					title: '请上传身份证反面照！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (BankFlow.length == 0) {
				uni.showToast({
					title: '请上传银行流水截图！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (EstateLicense.length == 0) {
				uni.showToast({
					title: '请上传购房合同/房产证！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (UserName == '') {
				uni.showToast({
					title: '请输入姓名！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (Phone == '') {
				uni.showToast({
					title: '请上输入手机号码',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (!Rexphone.test(Phone)) {
				uni.showToast({
					title: '手机号码有误！',
					icon: 'none',
					duration: 2000
				});
				return;
			}
		},
		//移除图片
		removeImg(row, index) {
			var that = this;
			switch (row) {
				case 'imagejust':
					that.imagejust.splice(index, 1);
					break;
				case 'imageback':
					that.imageback.splice(index, 1);
					break;
				case 'BankFlow':
					that.BankFlow.splice(index, 1);
					break;
				case 'EstateLicense':
					that.EstateLicense.splice(index, 1);
					break;
				// default:
			}
		},
		// 上传图片到服务器
		uploadImg(row) {
			let that = this;
			uni.chooseImage({
				count: 1,
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: URL.ENTER_UPLOAD_IMAGE,
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							user: 'test'
						},
						success: uploadFileRes => {
							uni.showLoading({
								title: '上传中'
							});
							console.log(uploadFileRes.data);
							let data = JSON.parse(uploadFileRes.data);
							if (data.code == 1) {
								console.log(data, '图片数据');
								switch (row) {
									case 'imagejust':
										that.imagejust.push({
											path: data.data.url,
											id: data.data.id
										});
										break;
									case 'imageback':
										that.imageback.push({
											path: data.data.url,
											id: data.data.id
										});
										break;
									case 'BankFlow':
										that.BankFlow.push({
											path: data.data.url,
											id: data.data.id
										});
										break;
									case 'EstateLicense':
										that.EstateLicense.push({
											path: data.data.url,
											id: data.data.id
										});
										break;
									// default:
								}
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none'
								});
							}
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
						}
					});
				}
			});
		},
		// 查看上传了的图片
		PreviewImage(data, index) {
			let img_url = [];
			data.forEach((item, index) => {
				img_url.push(item.path);
			});
			uni.previewImage({
				urls: img_url,
				current: index,
				longPressActions: {
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background: #fff;
}

.gradient_top {
	width: 100%;
	height: 100rpx;
	// position: relative;
	z-index: -1;
	overflow: hidden;
}

.gradient_top::after {
	content: '';
	width: 100%;
	height: 560rpx;
	position: absolute;
	left: 0%;
	top: 0;
	z-index: -1;
	// border-radius: 0 0 50% 50%;
	// background: #ddc8a8;
	background-image: url(https://liankun-1305433883.cos.ap-guangzhou.myqcloud.com/static/loan/head.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.personal_upload {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20rpx;
	.personal_View {
		width: 280rpx;
		height: 200rpx;
		overflow: hidden;
		border-radius: 12rpx;
		position: relative;
		.LookView {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			width: 280rpx;
			height: 200rpx;
			background: rgba(0, 0, 0, 0.3);
			.LookItem {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				.LookEye {
					margin-right: 20rpx;
				}
			}
		}
	}
}
.Main {
	background: #fff;
	margin: 0 24rpx;
	box-shadow: 0rpx 2rpx 14rpx 0rpx #f1f1f1;
	border-radius: 20rpx;
	position: relative;
	.MainTopBg {
		height: 22rpx;
		background: rgba(255, 255, 255, 0.5);
		position: absolute;
		top: -22rpx;
		line-height: 22rpx;
		margin: 0 20rpx;
		flex: 1;
		width: 660rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.MainDivider {
		padding: 78rpx 0;
	}
	.MainFrom {
		padding: 0 32rpx 0 32rpx;
		.MainFromItem {
			display: flex;
			align-items: center;
			padding-bottom: 50rpx;
			border-bottom: 2rpx solid #f1f1f1;
			margin-bottom: 50rpx;
			.MainLable {
				font-size: 30rpx;
				font-weight: 500;
				color: #2c2c2c;
				width: 150rpx;
				text {
					font-weight: bold;
					color: #c9413d;
				}
			}
			input {
				font-size: 30rpx;
			}
		}
	}
}
.uploadList {
	.uploadTitle {
		display: flex;
		align-items: flex-end;
		.uploadIcon {
			width: 10rpx;
			height: 36rpx;
			background: #b08b5c;
			margin-right: 20rpx;
		}
		.uploadNav {
			font-size: 30rpx;
			font-weight: 500;
			color: #2c2c2c;
		}
	}
	.uploadView {
		padding-bottom: 36rpx;
		margin: 32rpx 32rpx 46rpx 32rpx;
		border-bottom: 2rpx solid #f1f1f1;
		.uploadMain {
			padding: 30rpx 20rpx;
			background: #f9f9f9;
			border-radius: 10rpx;
			.uploadText {
				font-size: 24rpx;
				font-weight: 500;
				color: #9e9e9e;
			}
			.imgWrap {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 47rpx;
				// width: max-content;
				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: flex;
					border-radius: 4rpx;
					margin-right: 10rpx;
					position: relative;
					border: 1px dashed #8a8a8a;
					border-radius: 6rpx;
					margin-bottom: 10rpx;
					// image {
					// 	width: 164rpx;
					// 	height: 164rpx;
					// 	border-radius: 4rpx;
					// }
					.LookView {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						display: flex;
						align-items: center;
						width: 164rpx;
						height: 164rpx;
						background: rgba(0, 0, 0, 0.3);
						.LookItem {
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0 auto;
							.LookEye {
								margin-right: 20rpx;
							}
						}
					}
				}

				.img {
					width: 164rpx;
					height: 164rpx;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: #f6f7fb;
					font: 400 18rpx/20rpx;
					color: #a0a0a0;
					border: 1px dashed #8a8a8a;
					border-radius: 6rpx;
					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 4rpx;
					}
				}
			}
		}
	}
}
.btnView {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	margin: 32rpx 0;
	.btn {
		height: 96rpx;
		margin: 0 32rpx;
		background: linear-gradient(216deg, rgba(200, 169, 118, 0.94), rgba(222, 203, 169, 0.94));
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #402200;
		text-align: center;
		line-height: 96rpx;
	}
}
</style>
